<template>
  <div>
  <input v-model="name" placeholder="工作流名称">
    <div v-for="(inputSet, index) in inputSets" :key="index">
      <input v-model="inputSet.fieldName" placeholder="字段名">
      <select v-model="inputSet.fieldType" placeholder="字段类型">
        <option value="input">文本</option>
        <option value="datetime">日期</option>
        <option value="select">多选</option>
      </select>
      <input v-model="inputSet.fieldValue" placeholder="字段值">
    </div>
    <button @click="addInputSet">+</button>
    <button @click="submitData">确定</button>
  </div>


</template>



<script setup>
import { ref } from 'vue';
import axios from 'axios';

    // 存储输入框组数据的数组，每个元素是一个包含字段名和字段类型的对象
const name = ref()
const inputSets = ref([{ fieldName: '', fieldType: '',fieldValue: '' }]);

    // 新增一组输入框的方法
const addInputSet = () => {
    inputSets.value.push({ fieldName: '', fieldType: '',fieldValue: '' });
};

    // 提交数据的方法，将所有字段名和字段类型组装成JSON
const submitData = () => {
    const dataToSubmit = inputSets.value.map(inputSet => ({
    fieldName: inputSet.fieldName,
    fieldType: inputSet.fieldType,
    fieldValue: inputSet.fieldValue
    }));
    const params = JSON.stringify(dataToSubmit)
    console.log(JSON.stringify(dataToSubmit));
    console.log(name.value)

    axios.post("http://127.0.0.1:8000/wf/add/",{"name":name.value,"params":params})
    .then(res => {
        console.log(res)
    })

    // 这里可以将JSON.stringify(dataToSubmit) 的结果发送到后端等操作


    
};






</script>




<style scoped>


</style>